<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="margin-top-xs">
			<view class="save">
				<view style="flex: 1;">
					<span class="fl">(点击下方选择要添加的应用，可以多选)</span>
					<a class="om-btn fr" :class="{ 'om-cancel-btn': addList.length < 1 }" @click="save">确认</a>
				</view>
			</view>
			<view class="content" style="margin-top: 52px;">
				<uni-list>
					<uni-list-item v-for="item in menuList" :key="item.id" @click="selectApply(item)" :showArrow="false" :class="{ 'selected': isSelected(item.id) }">
						<view>{{ item.text }}</view>
						<view class="checked" v-show="isSelected(item.id)">√</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '添加应用',
				groupId: -1,
				menuList: [],
				addList: [],
			};
		},
		methods: {
			getMenuList(){
				let _that = this;
				_that.om.request('wxNewGroupMenu/getNotGroupMenuList', {
					groupId: _that.groupId
				}).then(res => {
					if (res.succeed) {
						_that.menuList = res.value
					}
				});
			},
			selectApply(item){
				let _that = this;
				// _that.om.request('wxGroupMenu/addAppToGroup', {
				// 	groupId: _that.groupId,
				// 	appId: item.id
				// },'post').then(res => {
				// 	if (res.succeed) {
				// 		uni.navigateBack()
				// 	}else{
				// 		_that.om.toast(res.msg);
				// 	}
				// });
				if (_that.addList.includes(item.id)) {
					_that.addList = _that.addList.filter(value => value !== item.id);
				}else{
					_that.addList.push(item.id)
				}
			},
			isSelected(id) {
				return this.addList.includes(id);
			},
			save(){
				let _that = this;
				if(_that.addList.length > 0){
					var addListStr = _that.addList.join(",");
					_that.om.request('wxNewGroupMenu/addAppsToGroup', {
						groupId: _that.groupId,
						appIds: addListStr
					},'post').then(res => {
						if (res.succeed) {
							uni.navigateBack()
						}else{
							_that.om.toast(res.msg);
						}
					});
				}else{
					_that.om.toast("请选择应用后再进行添加！");
				}
				
			}
		},
		onLoad(e) {
			this.groupId = e.groupId
			this.getMenuList()
		},
	};
</script>

<style lang="scss" scoped>
	.save{
		position: fixed;
		top: 0;
		display: flex;
		z-index: 99;
		width: 100%;
		padding: 5px 3px;
		border-bottom: 1px solid #c8c7cc;
		background: #FFF;
		span{
			margin-left: 12px;
			font-size: 14px;
			line-height: 42px;
		}
	}
	.content {
		.row{
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon{
				width: 30px;
				height: 30px;
				border-radius: 6px;
				margin-right: 13px;
			}
			.text{
				font-size: 13px;
			}
		}
	}
	.selected{
		background-color: #cce6ff;
	}
	.checked{
		position: absolute;
		right: 20px;
		top: 18px;
	}
</style>
